import React, { PureComponent } from 'react';
import { Divider } from 'antd';
import moment from 'moment';
import styles from './index.less';

class ShowTemplateMessage extends PureComponent {
  render() {
    const { dataSource } = this.props;
    const { title, url, data, chineseStrs } = dataSource;
    const chineseText = ['', ...chineseStrs, ''];
    const keywords = [];
    for (const i in data) {
      keywords.push(data[i]);
    }

    return (
      <div className={styles.tmpMsgShow}>
        <p className={styles.title}>{title}</p>
        <p className={styles.date}>{moment().format('M月DD日')}</p>
        <div style={{ marginTop: 10, marginBottom: 10 }}>
          {keywords.map((value, key) => (
            <p key={key}>
              {chineseText[key] === '' ? chineseText[key] : chineseText[key] + '：'}
              <span style={{ color: value.color }}>{value.text}</span>
            </p>
          ))}
        </div>
        <Divider style={{ margin: 0 }} />
        <a href={url}>详情</a>
      </div>
    );
  }
}

export default ShowTemplateMessage;
